/*
 * @Author: your name
 * @Date: 2021-04-20 10:46:43
 * @LastEditTime: 2021-04-25 17:32:10
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \ts-react-demo\src\router\index.tsx
 */
import { ReactNode, lazy } from "react";
import {
  HomeOutlined,
  UserSwitchOutlined, UserOutlined, UsergroupAddOutlined,
  BorderOuterOutlined, LoginOutlined, HighlightOutlined, FormOutlined, DiffOutlined, AlertOutlined
} from "@ant-design/icons";
const Home = lazy(() => import("../pages/Home"));
const Study = lazy(() => import("../pages/Study"));
const About = lazy(() => import("../pages/About"));
const User = lazy(() => import("../pages/User"));
const UserList = lazy(() => import("../pages/UserList"));
const UserDetail = lazy(() => import("../pages/UserDetail"));
const TodoList = lazy(() => import("../pages/TodoList"));
const HooksWithReact = lazy(() => import("../pages/HooksWithReact"));
const ReduxDemo = lazy(() => import("../pages/ReduxDemo"));
const Collapse = lazy(() => import("../pages/Collapse"));
// import About from "../pages/About";
// import Study from "../pages/Study";
// import Home from "../pages/Home";
// import User from "../pages/User";
// import Login from "../pages/Login";
// import UserList from "../pages/UserList";
// import UserDetail from "../pages/UserDetail";
interface IRouter {
  id: number;
  path: string;
  title: string;
  exact?: boolean;
  component?: ReactNode;
  children?: IRouter[];
  icon: ReactNode
}
export const router: IRouter[] = [
  {
    id: 1,
    path: "/",
    title: "index page",
    exact: true,
    component: <Home />,
    icon: <HomeOutlined />
  },

  {
    id: 5,
    path: "/ReduxDemo",
    title: "redux study demo",
    exact: true,
    component: <ReduxDemo />,
    icon: <BorderOuterOutlined />
  },
  {
    id: 6,
    path: "/hookswithreact",
    title: "hooks with react",
    exact: true,
    component: <HooksWithReact />,
    icon: <LoginOutlined />
  },
  {
    id: 7,
    path: "/about",
    title: "about page",
    exact: true,
    component: <About />,
    icon: <HighlightOutlined />
  },
  {
    id: 8,
    path: "/study",
    title: "study page",
    exact: true,
    component: <Study />,
    icon: <FormOutlined />
  },
  {
    id: 9,
    path: "/todolist",
    title: "todo page",
    exact: true,
    component: <TodoList />,
    icon: <DiffOutlined />
  },
  {
    id: 2,
    path: "/user",
    title: "user page",
    exact: true,
    component: <User />,
    icon: <UserSwitchOutlined />,
    children: [
      {
        id: 3,
        path: "/user/detail",
        title: "user detail page",
        exact: true,
        component: <UserDetail />,
        icon: <UserOutlined />
      },
      {
        id: 4,
        path: "/user/list",
        title: "user list page",
        exact: true,
        component: <UserList />,
        icon: <UsergroupAddOutlined />
      },
    ],
  },{
    id: 10,
    path: "/collapse",
    title: "collapse",
    exact: true,
    component: <Collapse />,
    icon: <AlertOutlined />
  }
];
